import * as React from 'react';
import {SafeAreaView} from 'react-native';
import Toast from '../../components/toast';
import Video from 'react-native-video';
import * as _ from 'lodash';
import {DEVICE_HEIGHT, DEVICE_WIDTH} from '../../utils';

class VideoPlayer extends React.Component {
  static navigationOptions = {
    title: '视频播放',
  };

  constructor(props) {
    super(props);
    this.state = {
      onLoading: false,
      videoHeight: DEVICE_HEIGHT,
      playerIconVisible: true,
      paused: true,
      playableDuration: 0,
      currentTime: 0,
      progressPercent: 0,
    };
  }

  render() {
    // videoSource: { uri: 'http://cdn.xxx.com/assets/videos/xxx.mp4' } OR require('../../local.mp4')
    const videoSource = _.get(this.props.navigation, 'state.params.source');
    let sourceType = _.get(
      this.props.navigation,
      'state.params.sourceType',
      'url',
    );
    // console.log(sourceType, videoSource);
    if (!videoSource || (sourceType === 'url' && !videoSource.uri)) {
      Toast.fail('视频路径不正确！', 2);
      return <SafeAreaView style={style.container} />;
    }
    return (
      <Video
        style={{
          width: DEVICE_WIDTH,
          height: DEVICE_HEIGHT,
        }}
        source={videoSource}
        repeat
        resizeMode="contain"
        ref={(ref: any) => (this.player = ref)}
        paused={this.state.paused}
        onLoadStart={(e: any) => {
          console.log('onLoadStart: ', e);
          this.setState({onLoading: true});
        }}
        onEnd={() =>
          this.setState({
            playerIconVisible: true,
            onLoading: false,
          })
        }
        onError={() => {
          Toast.fail('加载视频出错', 2);
          this.setState({onLoading: false});
        }}
        onLoad={(e: any) => {
          console.log('onLoad && ready to play: ', e);
          this.setState({paused: true, onLoading: false});
          const height = _.get(e, 'naturalSize.height');
          const width = _.get(e, 'naturalSize.width');
          console.log("video' width &&  height: ", width, height);
          let videoHeight = this.state.videoHeight;
          if (_.isNumber(height) && _.isNumber(width)) {
            videoHeight = (DEVICE_HEIGHT * height) / width;
          }
          this.setState({
            playableDuration: _.get(e, 'duration', 0),
            videoHeight,
            paused: false,
          });
        }}
        onProgress={(e: any) => {
          // console.log('onProgress: ', e);
          let currentTime = _.get(e, 'currentTime', 0);
          let playableDuration = _.get(e, 'playableDuration', 1);
          this.setState({
            currentTime,
            progressPercent: (currentTime / playableDuration) * 100,
          });
        }}
        onFullscreenPlayerDidPresent={() => {
          this.setState({paused: false});
        }}
        onFullscreenPlayerWillDismiss={() => {
          this.setState({paused: true});
        }}
      />
    );
  }
}

const PLAYER_ICON_WIDTH = 30;
const PLAYER_TIME = 50;
const PROGRESS_WIDTH = DEVICE_HEIGHT - PLAYER_ICON_WIDTH - PLAYER_TIME * 2 - 10;
const style = {
  container: {
    flex: 1,
    backgroundColor: '#000',
    alignItems: 'center',
    justifyContent: 'center',
  },
  videoCover: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    backgroundColor: 'transparent',
    alignItems: 'center',
    justifyContent: 'center',
  },
  playerController: {
    flexDirection: 'row',
    position: 'absolute',
    bottom: 5,
    left: 0,
    width: '100%',
    backgroundColor: 'rgba(0,0,0,0.3)',
    alignItems: 'center',
  },
  playerIcon: {
    width: PLAYER_ICON_WIDTH,
    height: 30,
    marginLeft: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
  playerProgress: {
    justifyContent: 'center',
    height: 4,
    width: PROGRESS_WIDTH,
    flex: 1,
  },
  playerTime: {
    width: PLAYER_TIME,
    height: 30,
    color: '#fff',
    padding: 5,
    textAlign: 'center',
  },
};

export default VideoPlayer;
